<!-- banner -->
<template>
  <div class="banner"></div>
</template>

<script>
export default {
  name: 'Banner',

  components: {},

  props: {},

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {},
}
</script>

<style lang='less' scoped>
.banner {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, red, orange, green, blue, purple) left
    center/400% 400%;
  animation: move 10s infinite;
}

@keyframes move {
  from {
    background-position-x: left;
  }
  to {
    background-position-x: right;
  }
}
</style>
